<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:c="http://java.sun.com/jsp/jstl/core" version="2.0">
	<jsp:directive.page contentType="text/html; charset=UTF-8"
		pageEncoding="UTF-8" session="false" />
	<jsp:output doctype-root-element="html"
		doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
		omit-xml-declaration="true" />
	<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<jsp:include page="../public/jsp/headerScript.jsp" />
<title>Login</title>
<script>
	$(document)
			.ready(
					function() {
						var container = $('div.error-container');
						// validate the form when it is submitted
						$("#login")
								.validate(
										{

											errorContainer : container,
											errorLabelContainer : $("ol",
													container),
											wrapper : 'li',
											rules : {
												email : {
													required : true,
													email : true,

												},
												password : {
													required : true,
													minlength : 6,
												},
											},
											messages : {
												password : {
													required : "password is required",
													minlength : "Your password must be at least 6 characters long"
												},
												email : " Email is invalid email address",

											},

										});
					});
</script>
</head>
<body>
	<jsp:include page="../public/jsp/header_nav.jsp" />
	<div id="content">
		<div id="featured-wrap">
			<article id="featured" class="clearfix">
				<div class="content-margin">
					<h1>Login</h1>
					<div>To access the private area of this site, please log in.</div>
					<div class="error-container">
						<p>There are some error below:</p>
						<ol>
							<li><label for="em" class="error">Please enter your
									email address</label>
							</li>
							<li><label for="pw" class="error">Please enter your
									password <b>number</b> (between 6 and 25 characters)</label>
							</li>
						</ol>
					</div>
				</div>
			</article>
			<article id="featured" class="clearfix">
				<div class="content-margin">
					<form id="login" action="Login" method="post">
						<table>
							<tr>
								<td><lable>Email:</lable>
								</td>
								<td><input type="text" name="email" />
								</td>
							</tr>
							<tr>
								<td><lable>Password:</lable>
								</td>
								<td><input type="password" name="password" />
								</td>
							</tr>
							<tr>
								<td></td>
								<td><input type="submit" name="loginsubmit" value="LOGIN" />
								</td>
							</tr>
							<c:if test="${not empty error }">
								<tr>
									<td colspan="2">
										<div class="error">${error}</div>
									</td>
								</tr>
							</c:if>
						</table>
						<ul>
							<li><a href="RetrievePassword">Forget your password</a>
							</li>
							<li><a href="Register">Register an account</a>
							</li>
						</ul>
					</form>
				</div>
			</article>
		</div>
	</div>
	<jsp:include page="../public/jsp/footer_nav.jsp" />
</body>
	</html>
</jsp:root>